<template>
	<div v-if="!isShowVideo">
		<Draggable :animation="300" class="material_com" v-model="materialList" @dragstart="handleDragStart"
			item-key="id">
			<template #item="{ element: item, index }">
				<transition name="fade" mode="out-in">
					<div class="material_item" :style="materialItemStyle(item, index)" @dragleave="dragLeave"
						@dragover.prevent="dragOver(item, index)" @drop="(e) => onDrop(e, 'material_item')"
						:key="index">
						<MenuOutlined class="drag_move" />
						<a-tooltip title="转场">
							<div class="connect_icon" :class="false ? 'active' : ''"
								v-if="index != materialList.length - 1" @click="() => addThis(index)">
								<div v-if="
									effects?.find((i) => i.type === 'transitions')?.params[
									  index
									]?.[0]?.random &&
									effects?.find((i) => i.type === 'transitions')?.params[
									  index
									]?.[1]?.random
								  " class="transition-random">
									随机
								</div>
								<div v-if="
									(!effects?.find((i) => i.type === 'transitions')?.params[
									  index
									]?.[0]?.random &&
									  effects?.find((i) => i.type === 'transitions')?.params[
										index
									  ]?.[0]?.sub_types?.length > 0) ||
									(!effects?.find((i) => i.type === 'transitions')?.params[
									  index
									]?.[1]?.random &&
									  effects?.find((i) => i.type === 'transitions')?.params[
										index
									  ]?.[1]?.sub_types?.length > 0)
								  " class="transition-num">
													{{
									effects?.find((i) => i.type === "transitions")?.params[
									  index
									]?.[0]?.sub_types?.length +
									effects?.find((i) => i.type === "transitions")?.params[
									  index
									]?.[1]?.sub_types?.length
								  }}
								</div>
								<CaretRightOutlined style="
									padding: 0px;
									color: #dcdcdc;
									transform: translateX(6px);
								  " />
								<CaretLeftOutlined style="
									padding: 0px;
									color: #dcdcdc;
									transform: translateX(-6px);
								  " />
							</div>
						</a-tooltip>
						<div class="material_operate">
							<div class="material_name" v-if="!item.edit">
								<a-typography-text style="max-width: 160px" ellipsis :content="item.name">
								</a-typography-text>
								<cu-icon type="icon-bianji" @click="editName(item)" class="edit_icon"
									style="margin-left: 10px" />
							</div>
							<div class="material_name" v-else>
								<a-input style="width: 140px" size="small" v-model:value="materialFoldName" />
								<a-button type="link" style="color: #272727; padding: 0; padding-left: 15px"
									@click="handleSaveName(item)">保存</a-button>
								<a-button type="link" style="color: #7d766b; padding: 0; padding-left: 5px"
									@click="handleCancel(item)">取消</a-button>
							</div>
							<cu-icon v-if="!item.edit" class="delete_icon" type="icon-shanchu1"
								@click="deleteMaterial(index)" />
						</div>
						<div class="material_time">
							<span>时长：{{
							  item?.duration > 0
								? utils.convertSecondsToMS(item?.duration * 1000)
								: item.video?.length > 0
								? `${utils.convertSecondsToMS(
									minBy(item.video, "material_duration").material_duration
								  )} ~ ${utils.convertSecondsToMS(
									maxBy(item.video, "material_duration").material_duration
								  )}`
								: "~"
							}}</span>
							<SettingOutlined @click="setTime(index)" style="margin-left: 5px" />
						</div>
						<div class="middle_con" @click="showVideoList(item, index)">
							<div v-show="video_index < 3" class="video_item"
								v-for="(video_item, video_index) in item.video" :key="video_index">
								<video v-if="video_item.material_type != 'image'" :src="video_item.material_url" />
								<img v-else :src="video_item.material_url" alt="" />
							</div>
							<div class="video_item_2" v-if="item.video.length > 3">
								+{{ item.video.length - 3 }}
							</div>
						</div>

						<div class="bottom_con" @click="() => addEffect(index)">
							<cu-icon style="font-size: 16px; color: #272727" type="icon-texiao1" />
							<div v-if="item?.vfx?.random" class="effect-random">随机</div>
							<div v-if="!item?.vfx?.random && item?.vfx?.sub_types?.length > 0" class="effect-num">
								{{ item?.vfx?.sub_types?.length }}
							</div>
							<span style="margin-left: 5px">特效</span>
						</div>
					</div>
				</transition>
			</template>
			<template #footer>
				<div class="add_con" @click="addMaterial">
					<PlusOutlined style="font-size: 12px" />场景
				</div>
			</template>
		</Draggable>

		<setTimeModal :data="materialList[currentHover]" :visible="setVisible" @submit="handleCutSubmit"
			@close="closeSet" />
		<addTransition :visible="addVisible" :currentIndex="currentHover" :data="
			effects?.find((item) => item.type === 'transitions')?.params?.[
			  currentHover
			]
		" @close="closeAdd" />
		<addSpecialEffects :visible="effectVisible" :data="materialList?.[currentHover]?.vfx"
			@submit="handleEffectSubmit" @close="closeEffect" />
	</div>

	<div @dragover.prevent class="sence_com" @drop="(e) => onDrop(e, 'sence_com')" v-else>
		<div class="top_con">
			<a-button size="small" class="back_btn" @click="backToScene">返回</a-button>
			<div class="sence_name">{{ currentScene.name }}</div>
		</div>
		<div class="video_con" v-if="currentScene.video.length > 0">
			<div class="video_item" v-for="(item, index) in currentScene.video" :key="index">
				<div class="operate_con">
					<div class="bottom_con">
						<DeleteOutlined @click="deleteVideo(index)" class="bottom_icon" />
					</div>
				</div>
				<div class="material_image">
					<div class="video_duration">{{ item.material_duration_text }}</div>
					<video v-if="item.material_type != 'image'" :src="item.material_url" alt="" />
					<img v-else :src="item.material_url" alt="" />
				</div>
				<div class="material_name">{{ item.material_name }}</div>
			</div>
		</div>

		<div class="video_con" style="
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		  " v-else>
			请从左侧拖入场景视频
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		computed,
		nextTick,
		effect,
		watch,
	} from "vue";
	import Draggable from "vuedraggable";
	import {
		message
	} from "ant-design-vue";
	import {
		FormOutlined,
		DeleteOutlined,
		SettingOutlined,
		MonitorOutlined,
		CaretRightOutlined,
		CaretLeftOutlined,
		PlusOutlined,
		MenuOutlined,
	} from "@ant-design/icons-vue";
	import setTimeModal from "./setTimeModal.vue";
	import addTransition from "./addTransition.vue";
	import addSpecialEffects from "./addSpecialEffects.vue";
	import store from "@/store";
	import {
		minBy,
		maxBy
	} from "lodash";
	import utils from "../../../../../../common/utils/utils";

	let count = 1;

	const INITIAL_MATERIAL_LiST = [{
			edit: false,
			name: "场景" + count++,
			video: [],
			// 视频特效
			// vfx: {
			//   // 随机
			//   random: true,
			//   // 特效类型
			//   sub_types: [],
			// },
		},
		{
			edit: false,
			name: "场景" + count++,
			video: [],
		},
		{
			edit: false,
			name: "场景" + count++,
			video: [],
		},
	];

	export default defineComponent({
		components: {
			Draggable,
			FormOutlined,
			DeleteOutlined,
			SettingOutlined,
			MonitorOutlined,
			CaretRightOutlined,
			CaretLeftOutlined,
			PlusOutlined,
			setTimeModal,
			addTransition,
			addSpecialEffects,
			MenuOutlined,
		},
		setup(props, context) {
			const state = reactive({
				setVisible: false,
				// 转场
				addVisible: false,
				// 特效
				effectVisible: false,
				materialFoldName: "",
				materialList: [...INITIAL_MATERIAL_LiST],
				// effects: [],
				currentHover: -1,
				isShowVideo: false,
				currentScene: {},
			});

			const effects = computed(() => store.getters.clipJSON?.effects);

			watch(
				() => store.getters.clipJSON.resource_data,
				(val) => {
					if (val?.length === 0) {
						state.materialList = [...INITIAL_MATERIAL_LiST];
						count = 4;
						return;
					}
					state.materialList = val;
					context.emit("updateNumber", {
						type: "material",
						count: state.materialList.length,
					});
				}, {
					deep: true,
					immediate: true
				}
			);

			watch(
				() => state.materialList,
				(val) => {
					store.dispatch("SetClipJSONResourceData", val);
				}, {
					deep: true,
					immediate: true
				}
			);

			watch(
				() => store.getters.clipJSON?.isEdit,
				(val) => {
					if (val) {
						count = state.materialList.length + 1;
					}
				}
			);

			const editName = (item) => {
				item.edit = true;
				state.materialFoldName = item.name;
			};

			const handleDragStart = (event) => {};

			const handleSaveName = (item) => {
				if (state.materialFoldName === "") {
					item.edit = false;
					return;
				}
				item.name = state.materialFoldName;
				item.edit = false;
			};

			const handleCancel = (item) => {
				state.materialFoldName = "";
				item.edit = false;
			};

			const deleteMaterial = (index) => {
				state.materialList.splice(index, 1);
				if (state.materialList.length === 0) {
					state.materialList.push({
						edit: false,
						name: "场景1",
						duration: null,
						video: [],
					});
				}
				context.emit("updateNumber", {
					type: "material",
					count: state.materialList.length,
				});
			};

			const addMaterial = () => {
				state.materialList.push({
					edit: false,
					name: "场景" + count++,
					duration: null,
					video: [],
				});
				context.emit("updateNumber", {
					type: "material",
					count: state.materialList.length,
				});
			};

			const setTime = (index) => {
				state.currentHover = index;
				state.setVisible = true;
			};

			const closeSet = () => {
				state.setVisible = false;
			};

			const addThis = (index) => {
				state.addVisible = true;
				state.currentHover = index;
			};

			const addEffect = (index) => {
				state.effectVisible = true;
				state.currentHover = index;
			};

			const closeAdd = () => {
				state.addVisible = false;
			};

			const handleCutSubmit = (cut) => {
				const {
					currentHover
				} = state;
				state.materialList[currentHover].cut_from = cut.cut_from;
				state.materialList[currentHover].duration = cut.duration || null;
			};

			// 视频特效
			/**
			 * random 是否随机
			 * sub_types[] 特效列表
			 */
			const handleEffectSubmit = (vfx) => {
				const {
					currentHover
				} = state;
				state.materialList[currentHover] = {
					...state.materialList[currentHover],
					vfx: {
						...vfx,
					},
				};
				state.effectVisible = false;
			};

			const closeEffect = () => {
				state.effectVisible = false;
			};

			const showVideoList = (item, index) => {
				state.isShowVideo = true;
				state.currentScene = item;
				state.currentHover = index;
			};

			const backToScene = () => {
				state.isShowVideo = false;
				state.currentScene = {};
				state.currentHover = -1;
			};

			const deleteVideo = (index) => {
				state.currentScene["video"].splice(index, 1);
				message.success("删除成功！");
			};

			const onDrop = (e, type) => {
				e.preventDefault(); // 阻止浏览器默认行为
				console.log(dragStatus.value)
				if (
					!(
						dragStatus.value.element?.scene_type == "video" ||
						dragStatus.value.element?.material_type == "video" ||
						(dragStatus.value.element?.material_type == "image" &&
						 dragStatus.value.element?.material_extension != "gif")
					)
				) {
					return;
				}
				let arr = state.materialList[state.currentHover]["video"];
				let arrId = state.materialList[state.currentHover]["video"].map(
					(item) => item.id
				);
				let flag_1 = false,
					flag_2 = false;
				dragStatus.value.materialList.map((item) => {
					if (item.checked && arrId.indexOf(item.id) != -1) {
						flag_1 = true;
					}
					if (item.checked && arrId.indexOf(item.id) == -1) {
						flag_2 = true;
						if (item?.material_type == "image") {
							item.material_duration_text = "00:05";
							item.material_duration = 5000;
						}
						arr.push(item);
					}
				});
				state.materialList[state.currentHover]["video"] = arr;
				if (flag_1) {
					message.success("部分素材重复添加，已自动剔除！");
				}
				if (!flag_1 && flag_2) {
					message.success("操作成功！");
				}

				dragStatus.value?.callback();

				if (type == "material_item") {
					state.currentScene = state.materialList[state.currentHover];
					nextTick(() => {
						state.currentHover = -1;
					});
				}
			};

			const dragOver = (item, index) => {
				state.currentHover = index;
			};

			const dragLeave = () => {
				state.currentHover = -1;
			};

			const dragStatus = computed(() => store.getters.dragStatus);

			const materialItemStyle = computed(() => {
				return function(item, index) {
					let flag_type = false
					if((dragStatus.value.element?.scene_type == "video" ||
						dragStatus.value.element?.material_type == "video" ||
						(dragStatus.value.element?.material_type == "image" &&
						dragStatus.value.element?.material_extension != "gif"))){
						flag_type = true
					}
					return {
						border: dragStatus.value.isDragging &&
							state.currentHover == index &&
							flag_type ?
							"1px solid #2878FFFF" :
							dragStatus.value.isDragging && flag_type ?
							"1px dashed #2878FFFF" :
							"1px dashed transparent",
					};
				};
			});

			return {
				...toRefs(state),
				editName,
				deleteMaterial,
				addMaterial,
				setTime,
				closeSet,
				addThis,
				addEffect,
				closeAdd,
				handleCutSubmit,
				handleEffectSubmit,
				handleSaveName,
				handleCancel,
				closeEffect,
				onDrop,
				dragOver,
				dragStatus,
				materialItemStyle,
				dragLeave,
				showVideoList,
				backToScene,
				deleteVideo,
				handleDragStart,
				utils,
				minBy,
				maxBy,
				effects,
			};
		},
	});
</script>

<style lang="less" scoped>
	.sence_com {
		width: 100%;
		height: 100%;

		.top_con {
			display: flex;
			border-bottom: 1px solid #333;
			align-items: center;
			width: 100%;
			height: 40px;
			padding: 0 20px;

			.sence_name {
				color: #fff;
				margin-left: 20px;
			}

			.back_btn {
				color: #ddd;
				background-color: #555;
				font-size: 12px;
				border: none;
			}
		}

		.video_con {
			height: calc(100% - 40px);
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 5px;
				height: 0px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			.video_item {
				width: 83px;
				height: 113px;
				cursor: pointer;
				flex-shrink: 0;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				margin-top: 10px;
				position: relative;
				margin-left: 20px;

				.operate_con {
					position: absolute;
					display: none;
					left: 0;
					top: 0;
					padding: 20px;
					width: 100%;
					height: 100%;
					z-index: 99;

					.bottom_con {
						position: absolute;
						left: 0;
						bottom: 30px;
						width: 100%;
						height: 20px;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.bottom_icon {
							margin-right: 5px;

							&:hover {
								color: #2878FF;
							}
						}
					}
				}

				&:hover {
					.operate_con {
						display: block;
					}
				}

				// 图片
				.material_image {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 83px;
					background-color: rgba(0, 0, 0, 0.8);
					position: relative;
					border-radius: 5px;
					border: 1px solid rgba(0, 0, 0, 0.8);
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;

					.video_duration {
						position: absolute;
						right: 3px;
						top: 0px;
						color: #fff;
					}

					video {
						max-height: 100%;
						max-width: 100%;
					}

					img {
						max-height: 100%;
						max-width: 100%;
					}
				}

				.material_name {
					margin-top: 7px;
					font-size: 12px;
					display: inline-block;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 80%;
					max-width: 140px;
					text-align: center;
				}
			}
		}
	}

	.material_com {
		padding: 20px;
		padding-top: 30px;
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		overflow-x: scroll;
		transition: all 0.3s;

		&::-webkit-scrollbar {
			width: 0px;
			height: 5px;
		}

		&::-webkit-scrollbar-track {
			height: 5px;
			background-color: transparent;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(193, 193, 193, 0.5);
			background-clip: padding-box;
			min-height: 28px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		.material_item {
			width: 268px;
			height: 221px;
			padding: 20px;
			background-image: url("https://hf.pigcms.com/static/wxapp/images/folder_back.png");
			background-repeat: no-repeat;
			background-size: 96% 96%;
			background-position: center;
			cursor: pointer;
			flex-shrink: 0;
			margin-left: 4px;
			position: relative;
			border-radius: 10px;

			&:hover {
				.drag_move {
					display: block;
				}

				.material_operate {
					.material_name {
						.edit_icon {
							display: block;

							&:hover {
								color: #2878FFff;
							}
						}
					}

					.delete_icon {
						display: block;

						&:hover {
							color: #2878FFff;
						}
					}
				}
			}

			.drag_move {
				position: absolute;
				left: 20px;
				top: 8px;
				color: #333;
				cursor: move;
				font-size: 17px;
				display: none;
			}

			.effect-random {
				padding: 0px 10px;
				border: 1px solid #fff;
				border-radius: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				color: #fff;
				font-size: 10px;
				background-color: #636300;
				right: 2px;
				bottom: 30px;
			}

			.effect-num {
				border: 1px solid #fff;
				border-radius: 9px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				color: #fff;
				height: 18px;
				padding: 0 6px;
				font-size: 10px;
				line-height: 18px;
				background-color: #636300;
				right: 5px;
				bottom: 25px;
			}

			.connect_icon {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30px;
				height: 30px;
				background-color: #49494d;
				color: #fff;
				right: -18px;
				top: 105px;
				border: 1px solid #fff;
				border-radius: 5px;
				font-size: 20px;
				z-index: 99;

				&:hover {
					border: 1px dashed #2878FFff;
				}

				&.active {
					border: 1px dashed #2878FFff;
				}

				.transition-random {
					padding: 0px 6px;
					border: 1px solid #2878FFff;
					border-radius: 9px;
					height: 18px;
					line-height: 18px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					color: #2878FFff;
					font-size: 10px;
					background: #fbd48a;
					right: -12px;
					bottom: 18px;
					display: flex;
					align-items: center;
				}

				.transition-num {
					position: absolute;
					background: #fbd48a;
					scale: 0.9;
					z-index: 10;
					color: #2878FFff;
					border: 1px solid #2878FFff;
					height: 18px;
					line-height: 18px;
					border-radius: 9px;
					padding: 0 6px;
					font-size: 12px;
					transform: translateX(-50%);
					left: 100%;
					bottom: calc(100% - 9px);
					display: flex;
					align-items: center;
				}
			}

			.material_operate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 15px;
				height: 30px;

				.material_name {
					color: #272727;
					font-size: 15px;
					display: flex;
					align-items: center;

					.edit_icon {
						display: none;
						font-size: 18px;
						transition: all 0.3s;
					}
				}

				.delete_icon {
					display: none;
					font-size: 16px;
					transition: all 0.3s;
				}
			}

			.material_time {
				display: flex;
				align-items: center;
				margin-top: 5px;
			}

			.middle_con {
				display: flex;
				align-items: center;
				height: 95px;

				.video_item {
					width: 50px;
					height: 50px;
					margin-right: -25px;
					border-radius: 5px;
					box-shadow: 1px 1px 20px #fff;
					background-color: rgba(0, 0, 0, 0.8);
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;

					&:nth-child(0) {
						margin-right: 0px;
					}

					video,
					img {
						max-width: 50px;
						max-height: 50px;
					}
				}

				.video_item_2 {
					width: 50px;
					height: 50px;
					margin-left: 30px;
					border-radius: 5px;
					box-shadow: 1px 1px 20px #fff;
					background-color: rgba(0, 0, 0, 0.8);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
			}

			.bottom_con {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&:hover {
					color: #2878FFff;
				}
			}
		}

		.add_con {
			width: 268px;
			height: 221px;
			background-image: url("https://hf.pigcms.com/static/wxapp/images/folder_add_back.png");
			background-repeat: no-repeat;
			background-size: 96% 96%;
			background-position: center;
			cursor: pointer;
			margin-left: 10px;
			flex-shrink: 0;
			margin-right: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 14px;

			&:hover {
				color: #2878FFff;
			}
		}
	}
</style>